<template>
  <div class="el-form-wrap">
    <el-form
      ref="form"
      :label-width="labelWidth"
      :status-icon="false"
      :inline="inline"
      :model="form"
      :size="size"
      :label-position="labelPosition"
    >
      <slot name="formPre"> </slot>
      <template v-for="(item, key) in form">
        <el-form-item
          v-if="item.tag && !item.hidden"
          :key="key"
          :prop="`${key}.value`"
          v-bind="item"
        >
          <!-- <template v-if="['el-select'].includes(item.tag)">
						{{ item.items.length }}
					</template> -->
          <component
            :is="item.tag"
            v-bind="item.props || {}"
            v-on="item.on || {}"
            v-model="item.value"
            v-if="['el-select'].includes(item.tag)"
            :key="item.items.length"
          >
            <el-option v-for="(e, i) in item.items" :key="i" v-bind="e" >
              <!-- :label="e.label === '材料' ? e.value + e.label : ''" -->
            </el-option>
          </component>
          <Uploader
            v-model="item.value"
            v-else-if="item.tag == 'Uploader'"
            v-bind="item.props || {}"
          />
          <component
            :is="item.tag"
            v-bind="item.props || {}"
            v-on="item.on || {}"
            v-model="item.value"
            v-else
          />
        </el-form-item>
      </template>
      <slot name="formSuf"> </slot>
      <slot name="formBtn">
        <el-form-item label=" ">
          <el-button color="#2563EB" type="primary" @click="submit">
            搜索
          </el-button>
          <el-button color="#2563EB" @click="reset"> 重置 </el-button>
        </el-form-item>
      </slot>
    </el-form>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    size: {
      type: String,
      default: "small",
    },
    labelWidth: {
      type: String,
      default: "",
    },
    form: {
      type: Object,
      default: () => ({}),
    },
    inline: {
      type: Boolean,
      default: true,
    },
    labelPosition: {
      type: String,
      default: "left",
    },
  },
  created(){
  },
  data() {
    return {
      fileList: [],
      formValues: {},
    };
  },
  watch: {},
  methods: {
    reset() {
      this.$refs.form.resetFields();
    },
    submit() {
      this.$refs.form.validate((valid: Boolean, res: Object) => {
        if (valid) {
          const resForm = {};
          for (const key in this.form) {
            if (Object.prototype.hasOwnProperty.call(this.form, key)) {
              if (!this.form[key].hidden) resForm[key] = this.form[key].value;
            }
          }
          this.formValues = resForm;
          return this.$emit("submit", resForm);
        } else {
          return this.$emit("unvalid", res);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form-wrap {
  :deep(.el-form--label-top) {
    .el-form-item__label {
      padding: 0;
    }
  }
}
</style>
